<template>
	<model-page>
	<view class="searchWrap">
		<view class="search_row">
			<view class="arrow_left" @click="back(overViewText)">
				<image src="../../static/image/index/arrow_left.png" mode=""></image>
			</view>
			<view class="searchPage">
				<uni-easyinput  prefixIcon="search" v-model="searchText"  focus placeholder="搜索" :maxlength="8" :clearable="false"></uni-easyinput>
				<view class="searchBtn" @click="searchBtn">
					搜索
				</view>
			</view>
		</view>
		<view class="searchList">
			<scroll-view scroll-y="true" style="height: 100%;">
				<view v-for="(item,index) in searchList" :key="index" class="search_item" @click="back(item.elderId,item.elderName)">
					<image src="../../static/image/searchIcon_black.png" mode=""></image>
					<text>
						{{item.elderName}}
					</text>
				</view>
			<view class="emptyData" v-if="searchList.length === 0 && isSearch">
				<image src="../../static/image/noData.png" mode=""></image>
				<text>搜索结果为空~~</text>
			</view>
			</scroll-view>
		</view>

	</view>	
	</model-page>


</template>

<script setup>
	import {ref} from 'vue'
	import {searchElderList} from '@/api/search.js'
	import {onLoad} from '@dcloudio/uni-app'
	const searchText = ref("")
	const overViewText = ref("")
	onLoad(({searchResult})=>{
		searchText.value = searchResult
	})
	const back = (type,searchResult)=>{
		if(type !== ""){
			uni.$emit("undateElderId",{type,searchResult})
		}
			uni.navigateBack()
	}
	const isSearch = ref(false) //是否搜索
	//确认搜索
	const searchList = ref([])
	const searchBtn = async()=>{
		try{
			if(searchText.value){
				const {code,data:res} = await searchElderList({
					search:searchText.value
				})
				if(code === 200){
					if(res.length === 0){
						isSearch.value = true
						searchList.value = []
					}else{
						isSearch.value = false
						searchList.value = res
					}
				}
			}else{
				searchList.value = []
			}
		}catch(e){
			//TODO handle the exception
			return Promise.reject(e)
		}

	}
</script>

<style lang="less" scoped>
	.searchWrap{
		padding-top: 130rpx;
		.search_row{
			display: flex;	
			align-items: center;
			.arrow_left{
				>image{
					width: 16rpx;
					height: 28rpx;
				}
				height: 100%;
				width: 40rpx;
			}

		}
		.searchPage{
			height: 68rpx;
			background: #FFFFFF;
			border-radius: 38px;
			border: 2px solid #FFFFFF;
			flex-grow: 1;
			display: flex;
			align-items: center;
			padding: 0 0 0 26rpx;
		}
		:deep(.is-input-border){
				border: none;
				background-color: transparent !important;
			}
	.searchBtn{
		font-weight: 500;
		font-size: 28rpx;
		color: #fff;
		height: 68rpx;
		line-height: 68rpx;
		padding: 0 30rpx;
		border-radius: 68rpx;
		background: linear-gradient( 90deg, #8F70F1 0%, #2382FB 100%);
	}
	}
.searchList{
	padding: 0 25rpx;
	margin-top: 60rpx;
	.search_item{
		padding-bottom:24rpx;
		margin-bottom: 24rpx;
		border-bottom: 1rpx solid #e5e5e5;
		>image{
			width: 24rpx;
			height: 24rpx;
			margin-right: 5rpx;
		}
		>text{
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
		}
	}
}
	.emptyData{
		margin-top: 100rpx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		>image{
			width: 200rpx;
			height: 120rpx;
		}
		text{
			margin-top: 10rpx;
			font-size: 28rpx;
			color: #767676;
		}

	}
	@media screen and (min-width: 768px){
		.searchWrap{
			.search_row{
				.arrow_left{
					margin-right: 20rpx;
					>image{
						width: 32rpx;
						height: 56rpx;
					}
				}
				.searchPage{
					height: 100rpx;
					.searchBtn{
							font-size: 42rpx;
					}
				}
				:deep(.uni-easyinput__content-input){
					height: 100rpx;
				}
				:deep(.uni-input-input){
					font-size: 42rpx;
				}
				:deep(.uni-input-placeholder){
					font-size: 40rpx;
				}
				
			}
			.searchBtn{
				height: 100rpx;
				line-height: 100rpx;
				padding: 0 60rpx;
				border-radius: 100rpx;
			}

	
		}
		.searchList{
			.search_item{
				>image{
					width: 36rpx;
					height:36rpx;
					margin-right: 10rpx;
				}
					
				text{
					font-size: 36rpx;
				}
			}
		}
		.emptyData{
			>image{
				width: 400rpx;
				height: 220rpx;
			}
			text{
				margin-top: 10rpx;
				font-size: 48rpx;
				color: #767676;
			}
		
		}
	}
</style>
